<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ page isELIgnored="false" %>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>知识服务</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<link rel="stylesheet" href="layui/css/layui.css" media="all">
	</head>
	<style>
		*{
			margin: 0px;
			padding: 0px;
		}
		body{
			background-color: #EEEEEE;
		}
		.knowledge-wrap{
			width: 85%;
			height: auto;
			margin: auto;
		}
		.knowledge-left,.knowledge-right{
			background-color: white;
			padding: 30px 50px 10px 50px;
		}
		.knowledge-left .knowledge-left-top li{
			font-size: 20px;
			font-weight: 600;
		}
		.knowledge-left-con{
			padding-top: 10px;
			padding-bottom: 20px;
			height: auto;
			overflow: hidden;
			margin-bottom: 10px;
			border-bottom: 1px solid #EAEAEA;
		}
		.knowledge-left-con a img{
			width: 270px;
			height: 160px;
			float: left;
			border-radius: 5px;
		}
		.knowledge-left-con .con-title{
			float: left;
			margin-left: 30px;
		}
		.knowledge-left-con .con-title a{
			display: block;
			font-size: 20px;
		}
		.knowledge-left-con .con-title ul{
			overflow: hidden;
			margin-top: 30px;
		}
		.knowledge-left-con .con-title ul li{
			list-style: none;
			float: left;
			margin-left: 15px;
		}
		.knowledge-right-con{
			padding-bottom: 20px;
		}
		.knowledge-right-con span{
			font-size: 18px;
			font-weight: 600;
			display: block;
			margin-bottom: 20px;
		}
		.knowledge-right-con a img{
			width: 100%;
			height: 160px;
			border-radius: 5px;
		}
		.knowledge-wrap .paging{
			width: 90%;
			margin: auto;
		}
		.knowledge-footer{
			width: 100%;
			height: 80px;
			margin: 20px 0px;
			line-height: 80px;
			background-color: rgb(46,46,46);
		}
		.knowledge-footer ul{
			width: 60%;
			margin: auto;
		}
		.knowledge-footer ul li{
			color: wheat;
			font-size: 16px;
			list-style: none;
			float: left;
			margin-left: 15px;
		}
		.layui-tab{
			margin-top: 0 !important;
		}
		.def-foot{
			background: #000;
			height: 80px;
			margin-top: 30px;
			padding-top: 10px;
		}
		.def-foot .text{
			width: 85%;
			margin: auto;
			color: #fff;
			font-size: 16px;
		}
		.def-foot .text p{
			margin-top: 6px;
		}
	</style>
	<body>
	<!-- 导航部分Start -->
	<%@ include file="sysmenu.jsp"%>
	<!-- 导航部分End -->	
	
	<div class="knowledge-wrap">
		<div class="layui-row layui-col-space20">
			  <div class="layui-col-sm8">
			      <div class="knowledge-left layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
			      	<ul class="layui-tab-title knowledge-left-top" style="margin-top: -15px;margin-bottom: 15px;">
					    <li class="layui-this">全部</li>
					</ul>
					<div class="layui-tab-content">
		    			<div class="layui-tab-item layui-show">
		    				<c:forEach items="${knomenulist }" var="obj" begin="0" end="9">
						      	<div class="knowledge-left-con">
						      		<a><img src="/kmsximgs/photo/${obj.path }" /></a>
						      		<div class="con-title">
						      			<a class="knolisttitle" title="${obj.title }" href="loadarticleinfo.action?articleid=${obj.infoid }">${obj.title }</a>
						      			<ul>
						      				<li>阅读量</li>
						      				<li>${obj.readnum }</li>
						      				<li style="margin-left: 30px;">点赞量</li>
						      				<li>${obj.praisenum }</li>
						      			</ul>
						      			<ul>
						      				<li>发表时间</li>
						      				<li>${obj.createtime }</li>
						      			</ul>
						      		</div>
						      	</div>
					      	</c:forEach>
					      	
					      	<div class="paging" id="paging"></div>
					    </div>
					</div>
			      </div>
			  </div>
			  <div class="layui-col-sm4">
			    	<div class="knowledge-right">
			    		<p style="font-size:20px;margin-left:-15px;margin-bottom:20px">推荐热点文章</p>
			    		<c:forEach items="${hotarticclelist }" var="obj">
				    		<div class="knowledge-right-con">
				    			<a href="loadarticleinfo.action?articleid=${obj.infoid }">
				    				<img src="/kmsximgs/photo/${obj.path }" />
				    			</a>
				    			<span class="hotarticletitle" title="${obj.title }">${obj.title }</span>
				    		</div>
			    		</c:forEach>
			    	</div>
			  </div>
		</div>
	</div>
	
	<div class="def-foot">
		<div class="text">
			<p>地址：云南省昆明市盘龙区青云街道办事处世博生态城低碳中心B栋301d号</p>
			<p>备案号：滇ICP备19003583号 </p>
		</div>
	</div>
	
	<script type="text/javascript" src="layui/layui.all.js" ></script>
	<script>
		layui.use(['laypage', 'layer'], function(){
			var laypage = layui.laypage,
			layer = layui.layer;
			
			//设置选中字体颜色
			$("#tabnavlia3").css("color","#fff");
			$("#tabnavlia3").parent().siblings().children().css("color","#000");
			
			$(".tpt-nav li ul").css("display","none")
			$("#navknowledgeserviceli").css("display","block");
			
			//分页
			laypage.render({
				elem : 'paging',
				count : ${count},
				curr: ${curr},
				layout : [ 'prev', 'page', 'next', 'skip' ],
				jump : function(obj,first) {
					var curr=obj.curr;
					//首次不执行
				    if(!first){
				    	window.location.href="loadknowledgeservice.action?curr="+curr;
				    }
				}
			});
		  
			//限制字符个数
			$(".knolisttitle").each(function(){
				var maxwidth=14;
				if($(this).text().length>maxwidth){
					$(this).text($(this).text().substring(0,maxwidth));
					$(this).html($(this).html()+'…');
				}
			});
			
			$(".hotarticletitle").each(function(){
				var maxwidth=12;
				if($(this).text().length>maxwidth){
					$(this).text($(this).text().substring(0,maxwidth));
					$(this).html($(this).html()+'…');
				}
			});
		});
	</script>
	</body>
</html>

